<template>
  <eui-background type="common">
    <eui-navbar ref="EuiNavBar" :title="title" :storeName="sUserStoreName" :storeId="sUserStore" displayable="true"/>
    <eui-card hPadding="28">

      <view class="item-view">
        <eui-text type="price2" title="费用总额" :value="mainData.c_amount" :valueStyle="showRightStyle"
                  :precision="3"/>
        <eui-text type="price2" title="发票代开费率(%)" :value="mainData.c_inv_fee_rate" :valueStyle="showRightStyle"
                  :precision="3"/>
        <eui-text title="采购地" :value="mainData.c_pl_no" :name="getFreshLocationName(mainData.c_pl_no)"
                  type="titlename2"/>
        <eui-text title="负责人" :value="mainData.c_charge_userno"
                  :name="getRelatedName('rdsUsers', mainData.c_charge_userno)"
                  type="titlename2"/>
        <eui-text v-model="mainData.c_desc" type="name2" title="费用说明" cWidth="width: 100%; margin-bottom: 20rpx"
                  :valueStyle="noteStyle"/>
      </view>
    </eui-card>
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
      <scroll-view scroll-y="true" style="height: 100%;">
        <view style="display:flex;flex-direction: column">
          <eui-card hPadding="28" v-if="detailData && detailData.length > 0">
            <view :ref="'dataItem' + index" v-for="(item, index) in detailData" :key="index">
              <view class="item-view">
                <eui-text type="titlename2" :title="index + 1 + '. 费用项目'"
                          :value="getUserDictName('生鲜采购费用',item.c_fee_item)"
                          cWidth="width: 100%"/>
                <!-- 不能编辑 -->
                <!--                <eui-card-input v-model="item.c_fee_amount" type="number" title="费用金额" h-padding="0" maxlength="9"-->
                <!--                                fieldName="c_fee_item" @confirm="validateDetail" isBlur-->
                <!--                                alignType="left" :precision="3" placeholder="请输入数量" :itemIndex="index"-->
                <!--                                :ref="`cardNLoadInput${index}`"/>-->
                <!--                <eui-card-input v-model="item.c_note" title="备注" fieldName="c_note" h-padding="0"-->
                <!--                                maxlength="100" alignType="left"/>-->
                <eui-text type="price2" title="费用金额" :value="item.c_fee_amount" :valueStyle="showRightStyle"
                          :precision="3"/>
                <eui-text v-model="item.c_note" type="name2" title="备注"/>
              </view>
            </view>
          </eui-card>
        </view>
      </scroll-view>
    </view>
  </eui-background>
</template>

<script setup type="ts">
import {onMounted, reactive, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import service from "@/common/service";
import {getRdsUrl, rdsRequest,} from '@/hooks/rdsServices';
import {useMainStore} from "@/store/modules/store";
import {getFreshLocationName, getRelatedName, getUserDictList, getUserDictName} from '../components/RelatedName.js';
import dateRangUtil from "@/common/dateRangUtil";
const rdsUrl = getRdsUrl();
const mainStore = useMainStore();
const listHeight = ref(300);
const noteStyle = ref('white-space: nowrap;overflow: hidden;text-overflow: ellipsis');
const c_id = ref(''); //单据号
const sUserStore = ref('');
const sUserStoreName = ref('');
const sUser = ref('');
const title = ref('采购费用');
const searchText = ref('');
const options = ref([{
  text: '删除',
  style: {
    backgroundColor: '#F56C6C',
  }
}]);
const showRightStyle = ref('text-align: right');
const showRedStyle = ref('text-align: right;color: #FF4000;');
const sysConfig = ref({
  isBarcode: 0, // 0-否 1-是，默认为否，是：启用时则支持按箱码订货，否则不支持按箱码订货
  isStrict: '2',//0-不控制，1-严格控制，2-提示但不控制
});
const dTypeSelectList = ref([]);
const sModeSelectList = ref([]);
const detailData = ref([]);
const listManager = ref([]);
let delList = reactive([]);
let newList = reactive([]);
let modifiedList = reactive([]);
const currentGds = ref({});
const currentGdsIndex = ref(0);
const mainData = ref({
  c_tenant_id: '',
  c_id: '',
  c_bill_type: '5D1',
  c_desc: '',
  c_status: '1',
  c_mk_type: '3',
  c_pl_no: '',
  c_amount: 0,
  c_inv_fee_rate: 0,
  c_charge_userno: '',
  c_mk_store_id: sUserStore.value,
  c_mk_store_name: sUserStoreName.value,
  c_mk_dt: dateRangUtil.formatDate(),
  c_mk_userno: sUser.value,
  c_modify_userno: '',
  c_approve_status: '1',
  c_au_dt: null,
  c_au_userno: '',
  c_note: '',
  c_sys_note: ''
});
const currentPage = ref(1);
const gdsPopup = ref(null);
const RdsSearchBar = ref(null);
const cardNInput = ref(null);
const c_n_buy = ref(0);
const c_sku_buy = ref(0);


onMounted(() => {
  getListHeight()
})

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) { // res - 各种参数
      let info = uni.createSelectorQuery().select(".footer-view");
      info.boundingClientRect(function (data) { //data - 各种参数
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        listHeight.value = height / (res.windowWidth / 750) - 100;
      }).exec()
    }
  });
};

onLoad(async (option) => {
  if (option.c_id) {
    title.value = option.c_id + '详情'
    mainData.value.c_id = option.c_id;
    service.enjoyShowLoading('正在加载...');
    await billQuery();
    service.enjoyHideLoading();
  } else {
    await initFeeDict();
  }
  await setDefault();
})

const setDefault = async (storeInfo) => {
  const {loginInfo} = mainStore;
  sUserStore.value = storeInfo?.sUserStore || loginInfo.sUserStore;
  sUserStoreName.value = storeInfo?.sUserStoreName || loginInfo.sUserStoreName;
  sUser.value = loginInfo.sUser;
  mainData.value.c_charge_userno = sUser.value;
}

const billQuery = async () => {
  if (!mainData.value.c_id) {
    return;
  }
  const req = {
    BillId: mainData.value.c_id,
  };
  const result = await rdsRequest(rdsUrl.scApi, '采购费用单', 'EnjoyBillQuery', req, '5D1');
  if (result.ds.length > 0) {
    mainData.value = result.ds[0];
    detailData.value = result.ds1;
    detailData.value.forEach(x => {
      x.rowType = 0;
    })
    title.value = mainData.value.c_id + '详情';
    calcMainAmount();
  } else {
    await uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '未查询到数据',
      mask: true,
    });
  }
}

const initFeeDict = async () => {
  const list = getUserDictList('生鲜采购费用');
  detailData.value = list.map(x => {
    return {
      c_fee_item: x.c_id,
      c_fee_amount: parseFloat(0).toFixed(2),
      c_fee_name: x.c_name,
    };
  });
  return list;
}

const calcMainAmount = () => {
  c_sku_buy.value = detailData.value.length || 0;
  c_n_buy.value = detailData.value.reduce((pre, current) => pre + (current.c_n_total_pur ?? 0), 0);
}
</script>

<style lang="scss" scoped>
@import '../../../main.scss';

.top-view {
  width: 100%;
  height: 88rpx;
}

.extra-view {
  margin-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 100%;
}

.footer-view {
  width: 100%;
  flex: 1;
}

.list-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bottom-view {
  width: 100%;
  height: 100rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}

.center-style {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 20rpx;
  //gap: 20rpx;
}

.gap-view {
  width: 20rpx;
  height: auto;
}

//内容行
.item-view {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: 16rpx;
  row-gap: 8rpx;
}

.button-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16rpx;
  row-gap: 8rpx;
}

.line-view {
  width: 100%;
  height: 1rpx;
  background: #EEEEEE;
  margin: 20rpx 0;
}

.popup-content {
  align-items: center;
  justify-content: left;
  flex-direction: column;
  padding: 0;
  width: 100%;
  background-color: #ffffff;
}

.popup-bottom {
  background: #ffffff;
  border-top: 1rpx solid $uni-line-color;
  display: flex;
  justify-content: center;
  padding: 20rpx;
}
</style>
